<template>
  <el-popover class="select-icon-popover" :width="width" :placement="placement">
    <el-scrollbar :style="{ height: scrollerHeight }" wrap-style="overflow-x: hidden;">
      <div class="icons">
        <div v-for="icon in icons" :key="icon" class="icon-item" :class="{ active: selectedIcon === noPrefix(icon) }"
          :style="selectedIcon === noPrefix(icon) ? activeStyle : null" @click="onSelect(noPrefix(icon))">
          <i :class="icon"></i>
        </div>
      </div>
    </el-scrollbar>

    <span slot="reference" class="popover-reference">
      <slot :selected-icon="selectedIcon"></slot>
    </span>
  </el-popover>
</template>

<script>
export default {
  name: 'select-icon',
  props: {
    value: String,
    placement: {
      type: String,
      default: 'bottom'
    },
    width: {
      type: Number,
      default: 400
    },
    height: {
      type: [String, Number],
      default: '300px'
    }
  },
  data() {
    return {
      icons: [],
      selectedIcon: this.value
    }
  },
  computed: {
    activeStyle() {
      const themeColor = this.$store.state.user.theme
      return {
        color: themeColor
      }
    },
    scrollerHeight() {
      const { height } = this
      return typeof height === 'string' ? height : height + 'px'
    }
  },
  watch: {
    value(val) {
      this.selectedIcon = val
    }
  },
  created() {
    this.icons = this.getIcons()
  },
  methods: {
    noPrefix (string) {
      return string.replace('i-custom:', '')
    },
    // TODO
    getIcons() {
      return [
        'i-custom:home',
        'i-custom:integral',
        'i-custom:clock',
        'i-custom:ali-clould',
        'i-custom:folder',
        'i-custom:set1',
        'i-custom:zijin',
        'i-custom:rfq-logo',
        'i-custom:add-products',
        'i-custom:moneymanagement-fill',
        'i-custom:newuserzone-fill',
        'i-custom:column',
        'i-custom:daytimemode',
        'i-custom:form',
        'i-custom:conditions',
        'i-custom:beijing',
        'i-custom:ali-clould-fill'
      ]
    },
    onSelect(iconWithNoPrefix) {
      this.selectedIcon = iconWithNoPrefix
      this.$emit('selected', iconWithNoPrefix)
    }
  }
}
</script>

<style scoped>
.icon-item {
  display: inline-block;
  font-size: 1.6em;
  padding: .3em;
}
</style>
